<template>
	<div id="hot-search">
		<template v-for="section in sections">
			<div class="section-wrap" :key="section.title">
				<div class="section-wrap__title">
					<b><font size="4" v-text="section.title"></font></b>
					<el-button type="text" class="section-wrap__link" @click="section.readMore = !section.readMore">更多</el-button>
				</div>
				<div v-for="(news, index) in section.newsList1" :key ="index + 'x'" v-show="section.readMore">
					<div style="color:#409EFF" v-text="news" v-on:click="$emit('showSearch')" @click="search(news)"></div>
				</div>
				<div v-for="(news, index) in section.newsList2" :key="index + 'y'" v-show="!section.readMore">
					<div style="color:#409EFF" v-text="news" v-on:click="$emit('showSearch')" @click="search(news)"></div>
				</div>	
			</div>
		</template>
	</div>
</template>

<script>
	export default {
		name: "hot",
		watch: {
			'$route.query.inputWord'(newVal, oldVal) {
				this.inputWord = newVal
			}
		},
		data() {
			return {
				inputWord:"",
				// sections:[],
				sections: [{
					title: '本周热搜',
					readMore: true,
					newsList1: [
						'test',	
						'Faster R-CNN',
						'Faster R-CNN',
						'Faster R-CNN',
						'Faster R-CNN',
					],
					newsList2: [{
						newsTitle: 'R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}]
				}, {
					title: '历史热搜',
					readMore: false,
					newsList1: [{
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}],
					newsList2: [{
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}]
				}, {
					title: '新兴词汇',
					readMore: false,
					newsList1: [{
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}],
					newsList2: [{
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}, {
						newsTitle: 'Faster R-CNN',
					}]
				}]
			}
		},
		methods:{
			search(val){
				console.log("[[[[[[]]]]]]")
				console.log(val)
				this.$router.push({name:'explain', query:{
					inputWord:val,
				}});
			},
			getdata(){
				this.$axios.post("api/getHot", {
				})
				.then(response=> {
						this.sections=response.data;
				})
				.catch(e=> {
				})
			}
		},
		mounted() {
			this.inputWord = this.$route.query.inputWord
			this.getdata()
		},
	}
</script>

<style scoped>
	#hot-search .section-wrap {
		/*width: ;*/
		margin-bottom: 10px;
		text-align: left;
	}

	#hot-search .section-wrap .section-wrap__title {
		display: flex;
		justify-content: space-between;
		border-bottom: solid 1px rgba(1, 14, 17, 0.67);
	}
	
	.section-wrap__link{
		text-align: right;
	}
	
</style>
